<!--  -->
<template>
  <div class="scroll-wrapper" ref="scroll">
    <div class="scroll-content">
      <div class="scroll-item" v-for="(item, index) in listData" :key="index">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar";
// console.log(MouseWheel)
import { listData } from "../data/testdata";

BScroll.use(MouseWheel);
BScroll.use(ScrollBar);

export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
    //这里存放数据
    return {
      listData,
    };
  },
  //方法集合
  methods: {
    init() {
      this.bscroll = new BScroll(this.$refs.scroll, {
        scrollY: true,
        probeType: 3,
        click: true,
        mouseWheel: true,
        scrollbar: true,
      });
      this.bscroll.on("scrollStart", () => {
        console.log("scrollStart-");
      });
      this.bscroll.on("scroll", ({ y }) => {
        console.log(y);
      });
      this.bscroll.on("scrollEnd", (pop) => {
        console.log(pop);
      });
    },
  },
  mounted() {
    this.init();
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeDestroy() {
      
  }, //生命周期 - 销毁之前
};
</script>
<style lang='scss' scoped>
.scroll-wrapper {
  position: absolute;
  top: 60px;left: 0;right: 0;bottom: 0;
  overflow: hidden;
  .scroll-item {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    text-align: center;
    &:nth-child(2n) {
      background-color: #f3f5f7;
    }
    &:nth-child(2n + 1) {
      background-color: #a4dfc4;
    }
  }
}
</style>